<template>
  <a-drawer
    :open="props.modelVisible"
    width="960"
    :body-style="{ padding: '0px', height: '100%' }"
    @close="handelCancel"
    :title="task.taskName"
  >
    <!-- 抽屉标题 -->
    <template #extra v-if="permission">
      <div class="second-message">
        <a-button style="margin-right: 15px" @click="createAssignmentModal = true"
          >新增分配</a-button
        >
        <a-tooltip>
          <template #title>更多</template>
          <a-dropdown :trigger="['click']">
            <MoreOutlined style="font-size: 22px; cursor: pointer" />
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a @click="editTaskName = true">编辑名称</a>
                  <a-modal
                    v-model:open="editTaskName"
                    title="编辑任务名称"
                    @cancel="
                      error = null;
                      placeholder = '请输入任务名称';
                    "
                    @ok="handleEditTaskName"
                  >
                    <a-input
                      :status="error"
                      v-model:value="newTaskName"
                      :placeholder="placeholder"
                    ></a-input>
                  </a-modal>
                </a-menu-item>
                <a-menu-item>
                  <a @click="editTaskDescription = true">编辑描述</a>
                  <a-modal
                    v-model:open="editTaskDescription"
                    title="编辑任务描述"
                    @ok="handleEditTaskDescription"
                  >
                    <a-textarea
                      :rows="5"
                      v-model:value="newTaskDescription"
                      placeholder="请输入新任务描述"
                    ></a-textarea>
                  </a-modal>
                </a-menu-item>
                <a-menu-item>
                  <a style="color: red">删除任务</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-tooltip>
      </div>
    </template>
    <!-- 加载开关 -->
    <div class="spin-wrapper" v-if="loading">
      <a-spin :indicator="indicator" :spinning="loading" />
    </div>
    <!-- 标签页模块 -->
    <a-tabs v-model:activeKey="activeKey" class="tab">
      <template #leftExtra>
        <span style="margin-left: 5px; visibility: hidden"> aaa </span>
      </template>
      <template #rightExtra v-if="permission">
        <div v-show="activeKey == 2">
          <a-button :disabled="!hasSelectedAssignment" @click="editAssignmentModal = true">
            编辑
          </a-button>
          <a-divider type="vertical"></a-divider>

          <a-popconfirm
            placement="left"
            :title="'是否要删除?'"
            ok-text="删除"
            cancel-text="取消"
            @confirm="deleteAssignments"
          >
            <a-button type="primary" danger :disabled="!hasSelectedAssignment"> 删除 </a-button>
          </a-popconfirm>
        </div>
        <div v-show="activeKey == 3">
          <a-button :disabled="!hasSelectedSubmission"> 验收 </a-button>
          <a-divider type="vertical"></a-divider>
          <a-popconfirm
            placement="left"
            :title="'是否要退回?'"
            ok-text="退回"
            cancel-text="取消"
            @confirm="returnSubmission"
          >
            <a-button type="primary" danger :disabled="!hasSelectedSubmission">退回</a-button>
          </a-popconfirm>
        </div>
      </template>

      <!-- 第一个标签页 基本信息 -->
      <a-tab-pane :key="1" tab="基本信息">
        <div style="display: flex" v-if="!loading">
          <!-- 左侧定位按钮 -->
          <div class="buttonGroup">
            <!-- 按钮1 描述按钮 -->
            <div @click="scrollToElement('#desc1')" class="icon">
              <FormOutlined class="icon-size" />
              <span>描述</span>
            </div>
            <a-divider style="margin: 0" />
            <!-- 按钮2 附件按钮 -->
            <div @click="scrollToElement('#desc3')" class="icon">
              <LinkOutlined class="icon-size" />
              <span>附件</span>
            </div>
            <a-divider style="margin: 0" />
          </div>

          <!-- 对应功能位置 -->
          <div style="overflow-y: auto; max-height: 600px">
            <a-card
              id="desc1"
              title="描述"
              style="width: 500px; min-height: 300px; margin: 0px 5px 5px 5px; overflow-y: auto"
            >
              {{ task.taskDescription }}
            </a-card>

            <a-card id="desc3" title="附件" style="width: 500px; min-height: 280px; margin: 5px">
              <template #extra>
                <a-upload
                  v-model:file-list="fileList"
                  :customRequest="upLoad"
                  multiple
                  :showUploadList="false"
                  name="file"
                >
                  <a-button>
                    <upload-outlined></upload-outlined>
                    上传附件
                  </a-button>
                </a-upload>
              </template>
              <a-list item-layout="horizontal" style="width: 100%" :data-source="attachmentData">
                <template #renderItem="{ item }">
                  <a-list-item style="width: 480px">
                    <template #actions>
                      <DownloadOutlined class="attachment-down-icon" />
                      <a-popconfirm
                        :title="'是否要删除' + item.attachmentName + '?'"
                        ok-text="删除"
                        cancel-text="取消"
                        @confirm="deleteAttachment(item)"
                      >
                        <DeleteOutlined class="attachment-delete-icon" />
                      </a-popconfirm>
                    </template>
                    <a-list-item-meta
                      style="cursor: pointer"
                      :description="`${formatBytes(item.size)} 来自 ${item.creatorName} | ${dayjs(
                        item.createTime
                      ).format('YYYY-MM-DD HH:mm:ss')}`"
                    >
                      <template #title>
                        <a>{{ item.attachmentName }}</a>
                      </template>
                      <template #avatar>
                        <FileIcon :fileName="item.attachmentName" size="36px" />
                      </template>
                    </a-list-item-meta>
                  </a-list-item>
                </template>
              </a-list>
              <a-divider style="margin: 0" />
            </a-card>
          </div>
          <a-card
            style="
              overflow-y: auto;
              width: 33%;
              padding: 0 1%;
              max-height: 600px;
              margin: 0 25px 5px 15px;
            "
            :title="'所属项目:' + projectName"
          >
            <!-- 任务基本信息表单 -->
            <a-form
              :model="task"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16 }"
              layout="horizontal"
              labelAlign="left"
              size="large"
            >
              <a-form-item label="任务类型" name="taskType">
                <a-select v-model:value="task.taskType" :bordered="edit" @change="editTaskTyppe">
                  <a-select-option :value="0" v-if="type != 1">
                    <a-tag color="blue">课程任务</a-tag>
                  </a-select-option>
                  <a-select-option v-for="option in taskTypeoptions" :value="option.value">
                    <a-tag :color="option.color">{{ option.label }}</a-tag>
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="关联课程" name="courseName" v-if="projectType == 2">
                <a-tooltip>
                  <a-select
                    v-model:value="task.courseId"
                    :bordered="edit"
                    :fieldNames="{ label: 'courseName', value: 'courseId' }"
                    :options="props.courseList"
                    @change="editTaskCourse"
                  >
                  </a-select>
                </a-tooltip>
              </a-form-item>
              <a-form-item label="创建人" name="mangerName">
                <a-tooltip>
                  <template #title>创建人不可修改</template>
                  <a-input v-model:value="task.creatorName" :bordered="false" :disabled="true" />
                </a-tooltip>
              </a-form-item>
              <a-form-item label="创建时间" name="createTime">
                <a-tooltip>
                  <template #title>创建时间不可修改</template>
                  <a-input v-model:value="task.createTime" :bordered="false" :disabled="true" />
                </a-tooltip>
              </a-form-item>
            </a-form>
          </a-card>
        </div>
      </a-tab-pane>

      <!-- 第二个标签页 分配记录 -->
      <a-tab-pane :key="2" tab="分配记录" style="height: 100%">
        <a-table
          style="height: 100%"
          v-if="!loading"
          :row-selection="{
            selectedRowKeys: assignemntState.selectedRowKeys,
            onChange: onSelectChange
          }"
          :columns="assignmentColumns"
          :data-source="assignmentData"
          :pagination="false"
          rowKey="assignmentId"
          :scroll="{ y: 'calc(100vh - 210px)' }"
          :customRow="
            (record) => {
              return {
                onclick: () => {
                  openAssignment(record);
                }
              };
            }
          "
        >
          <template #bodyCell="{ record, column, text }">
            <template v-if="column.dataIndex == 'assignmentStatus'">
              <a-tag
                v-if="
                  (record.finishTime != null && record.finishTime > record.endTime) ||
                  (record.finishTime == null && new Date() > record.endTime)
                "
                color="red"
                >超时</a-tag
              >
              <a-tag v-if="statusMap[text]" :color="statusMap[text].color">
                {{ statusMap[text].text }}
              </a-tag>
            </template>
            <template v-if="column.dataIndex == 'teamName'">
              <span>{{ text }}</span>
            </template>

            <template v-else-if="column.dataIndex == 'undertaker'">
              <span v-for="(user, index) in record.userList"
                >{{ user.userName }}
                <a-divider v-if="index != record.userList.length - 1" type="vertical" />
              </span>
            </template>
            <template v-else-if="column.dataIndex == 'createTime'">
              <span>{{ dayjs(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
            <template v-else-if="column.dataIndex == 'endTime'">
              <span>{{ dayjs(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </template>
        </a-table>
      </a-tab-pane>
      <!-- 第三个标签页 验收任务 -->
      <a-tab-pane :key="3" tab="验收任务" style="height: 100%">
        <a-table
          style="height: 100%"
          v-if="!loading"
          :row-selection="{
            selectedRowKeys: submissionState.selectedRowKeys,
            onChange: onSelectSubmissionChange
          }"
          :columns="submissionColumns"
          :data-source="submissionData"
          :pagination="false"
          rowKey="submissionId"
          :scroll="{ y: 'calc(100vh - 210px)' }"
          :customRow="customSubmissionRow"
        >
          <template #bodyCell="{ record, column, text }">
            <template v-if="column.dataIndex == 'evaluationStatus'">
              <a-tag
                v-if="getEvaluationStatus(record) !== null"
                :color="evaluaionStatusMap[getEvaluationStatus(record)].color"
              >
                {{ evaluaionStatusMap[getEvaluationStatus(record)].text }}
              </a-tag>
            </template>
            <template v-else-if="column.dataIndex == 'evaluations'"
              >{{
                record.evaluations.find((evaluation) => evaluation.evaluationType === 2)
                  ?.creatorName ?? ''
              }}
            </template>
            <template v-else-if="column.dataIndex == 'score'"
              >{{
                record.evaluations.find((evaluation) => evaluation.evaluationType === 2)?.score ??
                ''
              }}
            </template>
            <template v-else-if="column.dataIndex == 'createTime'">
              <span>{{ dayjs(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>

  <AssignmentDetailModal
    v-model:model-visible="assignmentDetailModal"
    :assignment="assignment"
    @confirm="
      findAssignment();
      emit('confirm');
    "
  />
  <SubmissionDetailModal
    v-model:model-visible="submissionDetailModal"
    :submission-list="submissionList"
    :index="submissionIndex"
    @confirm="findSubmissions()"
  />
  <CreateAssignmentModal
    v-model:model-visible="createAssignmentModal"
    :task-id="props.taskId"
    @confirm="
      findAssignment();
      emit('confirm');
    "
  />
  <EditAssignmentModal
    v-model:model-visible="editAssignmentModal"
    :assignment-id-list="assignemntState.selectedRowKeys"
    @confirm="findAssignment()"
  ></EditAssignmentModal>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import CreateAssignmentModal from './CreateAssignmentModal.vue';
import AssignmentDetailModal from './AssignmentDetailModal.vue';
import EditAssignmentModal from './EditAssignmentModal.vue';
import SubmissionDetailModal from './SubmissionDetailModal.vue';
import TaskDao from '@/daos/task_dao';
import ProjecrDao from '@/daos/project_dao';
import AttachmentDao from '@/daos/attachment_dao';
import SubmissionDao from '@/daos/submission_dao';
import { useStore } from 'vuex';
import { message } from 'ant-design-vue';

const taskDao = new TaskDao();
const attachmentDao = new AttachmentDao();
const submissionDao = new SubmissionDao();
const projectDao = new ProjecrDao();
const store = useStore();
//判断是否未为项目式教学项目
const type = store.getters.projectType;
//任务接口
interface task {
  taskId: number;
  taskName: string;
  taskDescription: string;
  createTime: string;
  courseId: number;
  creatorId: number;
  creatorName: string;
  taskType: number;
}

const props = defineProps({
  modelVisible: {
    type: Boolean,
    default: false
  },
  taskId: {
    type: Number
  },
  courseList: {
    type: Array
  }
});
const emit = defineEmits(['update:modelVisible', 'confirm']);
//加载开关
const loading = ref(true);
//项目类型
const projectType = store.getters.projectType;
//窗口开关
const editTaskName = ref(false);
const editTaskDescription = ref(false);
const assignmentDetailModal = ref(false);
const createAssignmentModal = ref(false);
const editAssignmentModal = ref(false);
const submissionDetailModal = ref(false);
//修改任务参数
const newTaskName = ref('');
const newTaskDescription = ref('');
const error = ref();
const placeholder = ref('请输入任务名称');
//修改任务方法
const handleEditTaskName = async () => {
  if (newTaskName.value === '') {
    error.value = 'error';
    placeholder.value = '任务名称不能为空';
  } else {
    const result = await taskDao.updateTaskName(props.taskId, newTaskName.value);
    editTaskName.value = false;
    task.value.taskName = newTaskName.value;
    emit('confirm');
    newTaskName.value = '';
    message.success(result.data.msg);
  }
};
const handleEditTaskDescription = async () => {
  const result = await taskDao.updateTaskDescription(props.taskId, newTaskDescription.value);
  editTaskDescription.value = false;
  task.value.taskDescription = newTaskDescription.value;
  newTaskDescription.value = '';
  message.success(result.data.msg);
};
const editTaskTyppe = async () => {
  const result = await taskDao.updateTaskType(props.taskId, task.value.taskType);
  emit('confirm');
  message.success(result.data.msg);
};
const editTaskCourse = async () => {
  const result = await taskDao.updateTaskCourse(props.taskId, task.value.courseId);
  emit('confirm');
  message.success(result.data.msg);
};
//检查是否开发部分按钮权限
const permission = ref<boolean>(false);

const setPermission = (type) => {
  if (type === 0) {
    permission.value = true;
  } else {
    permission.value = false;
  }
};

//标签页参数
const activeKey = ref(1);

//任务数据
const projectName = store.getters.projectName;
const task = ref<task>({
  taskName: '',
  taskType: undefined,
  taskDescription: '',
  taskId: undefined,
  createTime: '',
  courseId: undefined,
  creatorId: undefined,
  creatorName: ''
});
//文件数据
const fileList = ref([]);
const edit = ref(false);
//分配记录
const assignmentData = ref([]);
//提交记录
const submissionData = ref([]);
//附件数据
const attachmentData = ref([]);
//附件上传
const upLoad = async (file) => {
  const result = await attachmentDao.upLoadTaskAttachment(
    file.file,
    task.value.taskId,
    store.getters.userId
  );
  message.success(result.data.data);
  findAttachment();
};
//附件删除
const deleteAttachment = async (item) => {
  const result = await attachmentDao.deleteAttachmentByAttachmentId(
    item.attachmentId,
    item.attachmentUrl
  );
  attachmentData.value = attachmentData.value.filter(
    (attachment) => attachment.attachmentId !== item.attachmentId
  );
  message.success(result.data.msg);
};

//定位功能
const scrollToElement = (path: string) => {
  document.querySelector(path).scrollIntoView({ behavior: 'smooth' });
};

//查询任务信息
const findTask = () => {
  taskDao
    .findTaskByTaskId(props.taskId, projectType)
    .then((result) => {
      task.value = result.data.data;
      loading.value = false;
    })
    .catch((error) => {
      console.error('查询任务详情失败', error);
      loading.value = false;
    });
};

//获取任务所有附件
const findAttachment = async () => {
  const result = await attachmentDao.findAttachmentsByTaskId(props.taskId);
  attachmentData.value = result.data.data;
  loading.value = false;
};
//获取单个任务所有分配记录
const findAssignment = () => {
  taskDao
    .findAssignmentsByTaskId(props.taskId, projectType)
    .then((result) => {
      assignmentData.value = result.data.data;
      loading.value = false;
    })
    .catch((error) => {
      console.error('获取单个任务所有分配记录失败,findAssignment:', error);
      loading.value = false;
    });
};
//获取单个任务所有提交记录
const findSubmissions = () => {
  taskDao
    .findSubmissionAndAchievementByTasksId([props.taskId], projectType)
    .then((result) => {
      submissionData.value = result.data.data;
      loading.value = false;
    })
    .catch((error) => {
      console.error('获取单个任务所有提交记录,findSubmissions:', error);
      loading.value = false;
    });
};
//获取单个任务的所有提交记录
//删除任务分配记录
const deleteAssignments = () => {
  taskDao
    .deleteAssignmentByAssignmentId(assignemntState.selectedRowKeys)
    .then((result) => {
      if (result.data.code === 200) {
        assignemntState.selectedRowKeys = [];
        message.success(result.data.data);
        findAssignment();
        emit('confirm');
      } else {
        message.error(result.data.code + ' : ' + result.data.msg);
      }
    })
    .catch((error) => {
      console.error('删除任务分配记录失败 deleteAssignmentByAssignmentId', error);
    });
};
//文件大小转换
function formatBytes(bytes, decimals = 2) {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
//任务分配记录列
const assignmentColumns = [
  {
    title: '状态',
    width: '20%',
    dataIndex: 'assignmentStatus',
    fixed: 'left',
    align: 'center',
    filters: [
      {
        text: '未领取',
        value: 0
      },
      {
        text: '进行中',
        value: 1
      },

      {
        text: '待验收',
        value: 2
      },
      {
        text: '已完成',
        value: 3
      }
    ],
    onFilter: (value, record) => record.assignmentStatus == value
  },
  ...(projectType === 2
    ? [{ title: '小组名称', width: '20%', dataIndex: 'teamName', align: 'center' }]
    : [{ title: '创建日期', width: '20%', dataIndex: 'createTime', align: 'center' }]),
  { title: '承担人', width: '30%', dataIndex: 'undertaker', align: 'center' },
  { title: '截止日期', width: '30%', dataIndex: 'endTime', align: 'center' }
];
//任务分配记录多选项
const assignemntState = reactive<{ selectedRowKeys: number[] }>({
  selectedRowKeys: []
});
//任务多选触发
const onSelectChange = (selectedRowKeys: []) => {
  assignemntState.selectedRowKeys = selectedRowKeys;
};
//判断分配记录否选中至少一个
const hasSelectedAssignment = computed(() => assignemntState.selectedRowKeys.length > 0);
//提交记录验收列
const submissionColumns = [
  {
    title: '状态',
    width: '20%',
    dataIndex: 'evaluationStatus',
    fixed: 'left',
    align: 'center',
    filters: [
      {
        text: '待验收',
        value: 0
      },
      {
        text: '已完成',
        value: 1
      }
    ],
    onFilter: (value, record) =>
      record.evaluations.find((evaluation) => evaluation.evaluationType === 2)?.evaluationStatus ==
      value
  },
  ...(projectType === 2
    ? [{ title: '小组名称', width: '20%', dataIndex: 'teamName', align: 'center' }]
    : [{ title: '提交人', width: '20%', dataIndex: 'creatorId', align: 'center' }]),
  { title: '验收人', width: '20%', dataIndex: 'evaluations', align: 'center' },
  { title: '评分', width: '10%', dataIndex: 'score', align: 'center' },
  { title: '提交日期', width: '30%', dataIndex: 'createTime', align: 'center' }
];
//提交记录多选列
const submissionState = reactive<{ selectedRowKeys: number[] }>({
  selectedRowKeys: []
});
//提交记录多选触发
const onSelectSubmissionChange = (selectedRowKeys: []) => {
  submissionState.selectedRowKeys = selectedRowKeys;
};
//判断提交记录否选中至少一个
const hasSelectedSubmission = computed(() => submissionState.selectedRowKeys.length > 0);
//打开分配详情窗口
const assignment = ref();
const openAssignment = (record) => {
  assignment.value = record;
  assignmentDetailModal.value = true;
};
//打开提交详情窗口
const submissionList = ref([]);
const submissionIndex = ref();
const customSubmissionRow = (record, index) => {
  return {
    onClick: () => {
      openSubmission(record, index);
    }
  };
};
const openSubmission = (record, index) => {
  submissionList.value = submissionData.value;
  submissionIndex.value = index;
  submissionDetailModal.value = true;
};
//退回（删除）提交记录
const returnSubmission = () => {
  //获取提交记录对应的分配记录
  const assignmentIds = computed(() => {
    return submissionState.selectedRowKeys.map((submissionId) => {
      const item = submissionData.value.find(
        (submission) => submission.submissionId === submissionId
      );
      return item ? item.assignmentId : null;
    });
  });
  submissionDao
    .deleteSubmissions(assignmentIds.value, submissionState.selectedRowKeys)
    .then((result) => {
      submissionState.selectedRowKeys = [];
      message.success(result.data.msg);
      findSubmissions();
    })
    .catch((error) => {
      console.error('退回（删除）提交记录失败 deleteSubmissions', error);
    });
};
const handelCancel = () => {
  emit('update:modelVisible', false);
  assignemntState.selectedRowKeys = [];
  submissionState.selectedRowKeys = [];
  activeKey.value = 1;
};

//记录状态标签映射
const statusMap = {
  0: { text: '未领取', color: 'gray' },
  1: { text: '进行中', color: 'blue' },
  3: { text: '已完成', color: 'green' }
  // 其他状态
};
const evaluaionStatusMap = {
  0: { text: '待验收', color: 'yellow' },
  1: { text: '已完成', color: 'green' }
};
//任务类型筛选标签映射
const taskTypeoptions = [
  { value: 1, label: '需求任务', color: 'green' },
  { value: 2, label: '开发任务', color: 'cyan' },
  { value: 3, label: '测试任务', color: 'yellow' },
  { value: 4, label: '缺陷任务', color: 'orange' }
];

watch(
  () => props.modelVisible,
  (newValue) => {
    if (newValue === true) {
      loading.value = true;
      setPermission(store.getters.userType);
      findTask();
      findAttachment();
    }
  }
);
// 定义计算属性 getEvaluationStatus
const getEvaluationStatus = computed(() => (record) => {
  const evaluation = record.evaluations.find((e) => e.evaluationType === 2);
  return evaluation ? evaluation.evaluationStatus : null;
});
watch(
  () => activeKey.value,
  (newValue) => {
    if (newValue == 2) {
      loading.value = true;
      findAssignment();
    } else if (newValue == 3) {
      loading.value = true;
      findSubmissions();
    }
  }
);
//统一加载指示符
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '24px'
  },
  spin: true
});
</script>
<style scoped>
:deep(.ant-picker-disabled .ant-picker-input > input) {
  color: rgba(0, 0, 0, 0.85) !important;
  /* 设置你想要的文本颜色 */
  cursor: not-allowed !important;
  /* 你可以添加更多的样式属性来定制禁用状态 */
}

:deep(.ant-input-disabled) {
  color: rgba(0, 0, 0, 0.85) !important;
  /* 设置你想要的文本颜色 */
  cursor: not-allowed !important;
  /* 你可以添加更多的样式属性来定制禁用状态 */
}

:deep(.ant-select-disabled .ant-select-selector) {
  color: rgba(0, 0, 0, 0.85) !important;
  cursor: not-allowed !important;
}

.header-message {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 2%;
}

.second-message {
  display: flex;
  align-items: center;
}
.tab {
  padding: 0 10px;
  position: fixed;
  width: 960px;
  height: 100%;
}
.buttonGroup {
  height: auto;
  width: 60px;
  border: 1px solid #f0f0f0;
  margin: 0 5px;
  border-radius: 7px;
}
.icon {
  display: flex;
  flex-direction: column;
  padding: 10px;
  align-items: center;
  justify-content: center;
}
.icon-size {
  font-size: 25px;
}
.attachment-down-icon :hover {
  color: #0958d9;
}

.attachment-delete-icon :hover {
  color: red;
}

.assignment-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 95%;
  padding: 1%;
  border: 1px solid #aaa;
  margin: 1%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid lightgray;
  border-radius: 10px;
}
.card-content {
  display: flex;
  align-items: center;
}

.card-left {
  margin-right: 16px;
}

.card-middle {
  flex: 1;
  margin-right: 16px;
}

.card-right {
  display: flex;
  gap: 8px;
}
.spin-wrapper {
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 偏移修正 */
  z-index: 1000; /* 确保在最上层 */
}
</style>
